<template>
	<view>
		<view class="header" style="margin-top: 100rpx;">
			<view v-for="(item,index) in tabList" :key="index" class="head">
				<view class="navigator" @tap="switchTab(index, item.url)">
					<view class="icon">
						<view :class="['iconfont', 'm-color', item.selectedIconPath]" style="font-size: 44rpx;color: #2c8df4;" v-if="currentTabIndex == index"></view>
						<view :class="['iconfont', item.selectedIconPath]" style="font-size: 44rpx;color: #999999;" v-else></view>
					</view>
					<view class="text" :style="[currentTabIndex == index ? {'color': tinttextColor} : {'color': color}]">{{item.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				currentTabIndex: this.current,
				tabList: [{
						"url": "/pages/leave/apply",
						"iconPath": "icon-qingjia",
						"selectedIconPath": "icon-qingjia",
						"text": "我要请假"
					},
					{
						"url": "/pages/leave/list",
						"iconPath": "icon-jilu",
						"selectedIconPath": "icon-jilu",
						"text": "请假记录"
					}
				]
			}
		},
		props: {
			id: '',
			current: {
				type: [Number, String],
				default: 0
			},
			backgroundColor: {
				type: String,
				default: '#ffffff'
			},
			color: {
				type: String,
				default: '#9a9a9a'
			},
			tintColor: {
				type: String,
				default: '#2f85fe'
			},
			tinttextColor: {
				type: String,
				default: '#2f85fe'
			},
		},
		watch: {
			currentTabIndex(old, val) {
				this.currentTabIndex = old
			},
		},
		mounted() {
		},
		methods: {
			switchTab(index, url) {
				uni.reLaunch({
					url: url
				})
			},
		},
	}
</script>



<style lang="scss" scoped>
	.header {
		position: fixed;
		bottom: 0upx;
		display: flex;
		justify-content: space-around;
		background-color: white;
		flex-direction: row;
		width: 100%;
		// width: calc(100% - 104upx);
		z-index: 100;
		color: #c0c4cc;
		font-size: 28upx;
		height: 100upx;
		border-top: 1px solid #eeeeee;
		padding: 0 52rpx;
	}

	.head {
		display: flex;
		flex-direction: row;
		margin-top: 10upx;
		font-size: 24upx;
	}

	.count {
		min-height: 30rpx;
		min-width: 40rpx;
		background-color: red;
		border-radius: 20rpx;
		position: absolute;
		left: 40rpx;
		color: white;
		top: -10rpx;
		line-height: 30rpx;
		text-align: center;
		z-index: 2;
	}

	.navigator {
		position: relative;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		// margin-bottom: 5upx;
		// margin: 5rpx 30rpx;
	}

	.icon {
		display: flex;
		flex-direction: column;
		margin-top: -5upx;
		view {
			font-size: 20upx;
		}
	}

	.item {
		height: 100upx;
		width: 100upx;
		border-radius: 100upx;
		background-color: white;
		margin-top: -50upx;
		margin-bottom: 5upx;
	}

	.image {
		height: 96upx;
		width: 96upx;
		border-radius: 100upx;
		margin: 2upx 2upx;
	}

	.text {
		font-size: 22rpx;
		margin-top: -15upx;
	}
</style>
